/**
 * 分页开始
 */
+function(){
     //原声js面向对象实现分页的渲染
    function Pagination(data){
        this.data = data;
        this.upNext = document.querySelector('.toNext');
        this.upPrev = document.querySelector('.toPrev');

        this.renderPage = document.querySelector('.list');
        this.allPaginate = document.querySelector('.pagination');
        this.pageIndex = 1;
        this.init();
        this.bindEvent();
    }
    Pagination.prototype.render = function(){
        this.renderPage.innerHTML = '';
        this.toGoods = '';
        let html = '';
        for(let i in this.data[this.pageIndex]){
            let item = ` <div class="list-item" data-id="${this.data[this.pageIndex][i].goodsId}">
                            <a href="./goods.html"><img src='${this.data[this.pageIndex][i].imgUrl}'></a>
                            <p><a></a></p>
                            <div class="item-price">￥<span>${this.data[this.pageIndex][i].price}</span></div>
                            <div class="item-title">${this.data[this.pageIndex][i].title}</div>
                            <div class="buy">
                                <a class="buyNow" href="./goods.html"><i></i><span>立即购买</span></a>
                                <a class="addCart"><span>加入购物车</span><i></i></a>
                            </div>
                        </div>`
            html += item;
        }
        this.renderPage.innerHTML = html;

        this.listItem = [].slice.call(document.querySelectorAll('.list-item'));
        this.changeGoodsId()
        addCartClick(this.data,this.pageIndex)
    }
    //获取列表项 点击时改变LocalStorge的goodsId
    Pagination.prototype.changeGoodsId = function(){
        for(let i in this.listItem){
            this.listItem[i].addEventListener('click',function(){
                localStorage.setItem('goodsId',this.getAttribute('data-id'));
             })
        }
    }
    Pagination.prototype.init = function(){
        //为分页添加底部数字并为数字渲染样式，点击数字可跳转至哪页；
        let html = '';
        for(let i in this.data){
            let item = `<a class="page-item">${i}</a>`
            html += item;
        }
        this.allPaginate.innerHTML += html;
        this.pageNum = [].slice.call(document.querySelectorAll('.page-item'));
        this.pageNum[0].style.backgroundColor = '#e4393c';
        this.pageNum[0].style.color = '#fff';

        //获取一些数据 init获取不到 可能是在上面渲染底部数字的问题；
        this.pageNext = document.querySelector('.page-next');
        this.whichPage = document.querySelector('.whichPage');
        this.toPage = document.querySelector('.toPage');
        //首次加载列表，默认第一页；
        this.render();
    }
    Pagination.prototype.bindEvent = function(){
        let _this = this;
        for(let index in this.pageNum){
            this.pageNum[index].addEventListener('click',this.changePage.bind(this,index))
        }
        this.pageNext.addEventListener('click',function(){
            _this.toNext()
        })
        this.upNext.addEventListener('click',function(){
            _this.toNext()
        })
        this.upPrev.addEventListener('click',function(){
            _this.toPrev()
        })
        this.whichPage.addEventListener('change',function(){
            _this.inputValue = this.value;
        })
        this.toPage.addEventListener('click',function(){
            _this.changePage(_this.inputValue-1)
            _this.whichPage.value = '';
        })
    }
    Pagination.prototype.toNext = function(){
        this.pageIndex++;
        if(this.pageIndex == this.pageNum.length+1){
            this.pageIndex = 1;
        }
        this.changePage(this.pageIndex-1)
    }
    Pagination.prototype.toPrev = function(){
        this.pageIndex--;
        if(this.pageIndex == 0){
            this.pageIndex = this.pageNum.length;
        }
        this.changePage(this.pageIndex-1)
    }
    Pagination.prototype.changePage = function(index){
        for(let index in this.pageNum){
            this.pageNum[index].style.backgroundColor = '#fff';
            this.pageNum[index].style.color = '#000';
        }
        this.pageNum[index].style.backgroundColor = '#e4393c';
        this.pageNum[index].style.color = '#fff';
        this.pageIndex = parseInt(index) + 1;
        this.render();
    }

    //每页十个数据，对数据进行分组并整合为一个二级数组。
    function preHandle(res){
        let goodsList = res.goodsList;
        let pageList = [];
        for(let i=0;i<goodsList.length;i++){
            let page = Math.floor(i/10)+1;
            if(!pageList[page]){
                pageList[page] = []
            }
            pageList[page].push(goodsList[i])
        }

        new Pagination(pageList);
    }

    $.ajax({url:"./static/goods.json",success:function(res){
        preHandle(res)
    }})



}()
/**
 * 加入购物车小功能(用的是商品详情的加入购物车函数，小改动)
 */
function addCartClick(pageList,pageIndex){
    $(".addCart").click(function(){
        let goodsId = parseInt($(this).parents(".list-item").attr("data-id"));
        let goodsNum = 1;
        handleCart(goodsId,goodsNum,pageList[pageIndex])
        $(".sliderBar").animate({
            right:0
        });
        addCart(goodsNum,goodsId);
        cartShow();
    })
}

function handleCart(goodsId,goodsNum,goodsList){
let cartList = typeof localStorage.cartList =='undefined'?[]:JSON.parse(localStorage.cartList);

$(goodsList).each(function(index,item){

    if(item.goodsId == goodsId){

        let goodsObj = {
            "goodsId":goodsId,
            "imgUrl":`${goodsList[index].imgUrl}`,
            "title":`${goodsList[index].title}`,
            "price":`${goodsList[index].price}`,
            "goodsNum":goodsNum
        }
        let flag = true;

        if(cartList.length == 0){
            cartList.push(goodsObj);
        }else{
            $(cartList).each(function(i,ele){
                if(ele.goodsId == goodsId){
                    ele.goodsNum += goodsNum;
                    flag = false;
                }
            })
            if(flag){
                cartList.push(goodsObj);
            }
        }
    }

})
localStorage.cartList = JSON.stringify(cartList);
// console.log(JSON.parse(localStorage.cartList))
}